<template>
    <view class="main_view">
        <view class="calendar_main_view">
            <view class="calendar_head_view">
                <label class="calendar_month">{{ currentSelectMonth }}</label>
                <view class="caleadar_menu">
                    <view @click="rePath('next')" class="caleadar_menu_item">
                        <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/calender_right.png" class="caleadar_menu_item_img"></image>
                    </view>
                    <view @click="rePath('upper')" style="margin-right: 30rpx" class="caleadar_menu_item">
                        <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/calender_left.png" class="caleadar_menu_item_img"></image>
                    </view>
                </view>
            </view>
            <view class="week_nav">
                <label
                    style="color: #989db3; font-size: 26rpx; font-weight: 600; line-height: 36rpx"
                    v-for="(witem, windex) in week"
                    :key="windex"
                    >{{ witem }}</label
                >
            </view>
            <view v-if="dayList.length > 0" class="day_table">
                <view v-for="nullindex in weekey" :key="nullindex" class="day_cell"></view>
                <view
                    @click="selectDate(dayItem)"
                    :class="selectDay.includes(dayItem.dayText) ? 'day_cell_sel' : 'day_cell'"
                    v-for="(dayItem, dayIndex) in dayList[monthIndex].chlid"
                    :key="dayIndex"
                >
                    <label :class="selectDay.includes(dayItem.dayText) ? 'day_text_sel' : 'day_text'">{{
                        dayItem.day
                    }}</label>
                    <view :class="[getFlagClass(dayItem)]"></view>
                </view>
            </view>
        </view>
        <view class="calendar_tips_view">
            <view style="margin-top: 0rpx; margin-left: 28rpx" class="store_type_flag"></view>
            <label style="margin-left: 8rpx; color: #373d52; font-size: 28rpx">到店</label>
            <view style="margin-top: 0rpx; margin-left: 28rpx" class="record_type_flag"></view>
            <label style="margin-left: 8rpx; color: #373d52; font-size: 28rpx">体脂秤</label>
            <view style="margin-top: 0rpx; margin-left: 28rpx" class="all_type_flag"></view>
            <label style="margin-left: 8rpx; color: #373d52; font-size: 28rpx">体脂秤&到店</label>
            <image
                @click="backCurrent()"
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/back_current_day.png"
                style="margin-left: auto; margin-right: 30rpx; width: 182rpx; height: 64rpx"
            ></image>
        </view>
    </view>
</template>

<script>
export default {
    name: "measure-records-calendar",
    data() {
        return {
            week: ["日", "一", "二", "三", "四", "五", "六"],
            weekey: 0,
            dayList: [],
            monthIndex: 0,
            Timesr: "",
            opt: [],
            selectDay: [],
            currentSelectMonth: "",
        };
    },
    methods: {
        getTime() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let y = year;
            let m = month <= 9 ? "0" + month : month;
            let d = day <= 9 ? "0" + day : day;
            let Times = `${y}-${m}-${d}`;
            return { Times, y, d, month };
        },
        createTime() {
            let t = this;
            let Timesr = t.getTime();
            t.selectDay.push(Timesr.Times);
            t.Timesr = Timesr;
            t.$nextTick(() => {
                this.optTime(Timesr, true);
            });
        },
        // 到时候需要什么数据改这个函数
        optTime(Timesr, isFirst) {
            let t = this;
            let lastDay = new Date(Timesr.y, Timesr.month, 0).getDate();
            this.weekey = new Date(`${Timesr.y}/${Timesr.month}/01`).getDay();
            let arr = [];
            arr[t.monthIndex] = {
                Yname: `${Timesr.y}.${Timesr.month <= 9 ? "0" + Timesr.month : Timesr.month}`,
                chlid: [],
            };
            for (let i = 1; i <= lastDay; i++) {
                let _o = {
                    day: i,
                    m: Timesr.month,
                    y: Timesr.y,
                    dayText: `${Timesr.y}-${Timesr.month <= 9 ? "0" + Timesr.month : Timesr.month}-${
                        i <= 9 ? "0" + i : i
                    }`,
                    record: {},
                    store: {},
                };
                arr[t.monthIndex].chlid.push(_o);
            }
            t.dayList = arr;
            if (t.dayList.length > 0) {
                this.currentSelectMonth = t.dayList[0].Yname;
                var form = {
                    startRecordDate: t.dayList[0].chlid[0].dayText,
                    endRecordDate: t.dayList[0].chlid[t.dayList[0].chlid.length - 1].dayText,
                };
                this.request
                    .httpTokenJsonRequest("/mp-api/wx/weight/measure/records", form, "POST", true)
                    .then((res) => {
                        if (res.code == 0) {
                            t.dayList[0].chlid.forEach((item) => {
                                res.data.records.forEach((record) => {
                                    if (item.dayText == record.recordDate) {
                                        item.record = record;
                                    }
                                });
                                res.data.stores.forEach((store) => {
                                    if (item.dayText == store.recordDate) {
                                        item.store = store;
                                    }
                                });
                            });
                            if (isFirst) {
                                t.backCurrent();
                            }
                        }
                    });
            }
        },
        backCurrent() {
            let t = this;
            let opt = t.Timesr;
            opt.y = this.getTime().y;
            opt.month = this.getTime().month;
            t.selectDay = [this.getTime().Times];
            this.dayList[this.monthIndex].chlid.forEach((item) => {
                if (t.selectDay.includes(item.dayText)) {
                    t.$emit("select", item);
                }
            });
        },
        //上下一个月
        rePath(o) {
            let t = this;
            let opt = t.Timesr;
            // t.selectDay = []
            t.opt = [];
            if (o == "upper") {
                opt.month--;
                if (opt.month == 0) {
                    opt.month = 12;
                    opt.y--;
                }
            } else {
                opt.month++;
                if (opt.month > 12) {
                    opt.month = 1;
                    opt.y++;
                }
            }
        },
        selectDate(Node) {
            let opt = this.opt;
            let arr = this.selectDay;
            let t = this;
            if (Node) {
                t.selectDay = [Node.dayText];
                t.$emit("select", Node);
            }
        },
        getFlagClass(item) {
            if (item.record.id && item.store.id) {
                return "all_type_flag";
            }
            if (item.record.id) {
                return "record_type_flag";
            }
            if (item.store.id) {
                return "store_type_flag";
            }
            return "";
        },
    },
    created() {
        this.createTime();
    },
    watch: {
        Timesr: {
            deep: true,
            handler(val) {
                this.optTime(val, false);
            },
        },
    },
};
</script>

<style scoped>
.main_view {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0rpx 4rpx 16rpx 0px rgba(224, 237, 233, 0.5);
    border-radius: 0rpx 0rpx 40rpx 40rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.calendar_main_view {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0rpx 4rpx 16rpx 0px rgba(224, 237, 233, 0.5);
    border-radius: 0rpx 0rpx 40rpx 40rpx;
    width: 100%;

    display: flex;
    flex-direction: column;
}
.calendar_tips_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 104rpx;
    width: 100%;
}
.calendar_head_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 26rpx;
}
.calendar_month {
    margin-left: 42rpx;
    color: #373d52;
    font-size: 52rpx;
    font-weight: 600;
    line-height: 76rpx;
}
.caleadar_menu {
    margin-left: auto;
    margin-right: 40rpx;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.caleadar_menu_item {
    width: 44rpx;
    height: 64rpx;
    border-radius: 8rpx;
    background-color: rgba(65, 129, 112, 0.06);
}
.caleadar_menu_item_img {
    width: 32rpx;
    height: 32rpx;
    margin-left: 6rpx;
    margin-top: 16rpx;
}
.week_nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 92%;
    margin: 28rpx auto 0;
    /* margin-left: 35rpx; */
    /* margin-top: 28rpx; */
}
.day_table {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 92%;
    margin: 30rpx auto;
    /* margin-left: 55rpx; */
    /* width: calc(100% - 64rpx); */
    /* margin: 30rpx 0 30rpx 55rpx; */
}
.day_cell {
    width: 14%;
    height: 96rpx;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    /* margin-right: 34rpx; */
}
.day_cell:nth-child(7) {
    margin-right: 0rpx;
}
.day_cell_sel:nth-child(7) {
    margin-right: 0rpx;
}
.day_cell_sel {
    width: 32px;
    margin: 0 2%;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #ffe8ec 0%, #ff6f89 100%);
    border-radius: 16px;
}
.week_nav label {
    width: 14%;
    text-align: center;
}
.week_nav label:nth-child(7) {
    margin-right: 0;
}
.day_text_sel {
    font-weight: 600;
    color: #ffffff;
    font-size: 28rpx;
    line-height: 38rpx;
    margin-top: 12rpx;
    text-align: center;
}
.day_text {
    font-weight: 600;
    color: #333333;
    font-size: 28rpx;
    line-height: 38rpx;
    margin-top: 12rpx;
    text-align: center;
}
.all_type_flag {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background-color: #ffc659;
    margin-top: auto;
    margin-bottom: 12rpx;
}
.store_type_flag {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background-color: #53a9ff;
    margin-top: auto;
    margin-bottom: 12rpx;
}
.record_type_flag {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background-color: #009977;
    margin-top: auto;
    margin-bottom: 12rpx;
}
</style>
